<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title></title>
</head>
<link rel="stylesheet" type="text/css" href="/Public/css/index.css"/>
<link rel="stylesheet" type="text/css" href="/Public/css/nav.css"/>
<link rel="stylesheet" type="text/css" href="/Public/css/base.css"/>
<link rel="stylesheet" type="text/css" href="/Public/css/uploadfile-index.css"/>
<link rel="stylesheet" type="text/css" href="/Public/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="/Public/Font-Awesome-3.2.1/css/font-awesome.min.css"/>
<style type="text/css">
	
</style>
<body>
<include file="Public/nav" /> 
<div class="container" style="width: 1050px;margin:47px auto">
		<div class="row" >
				<include file="Public/panel" /> 
				<div class="col-md-9">
					<h3>上传文件</h3>
					<form class="form-horizontal uploadform" role="form">					  
					  <div class="form-group">
					    <label for="inputEmail3" class="col-sm-2 control-label">选择文件</label>
					    <div class="col-sm-10">
					    <input type="file" id="multifile" style="display: none;" multiple size="80" onchange="handleFiles(this.files)"/>
							<div class="input-append">  
							    <input id="photoCover" class="input-large" type="text" style="height:30px;">  
							    <a class="btn btn-info" onclick="$('input[id=multifile]').click();">Browse</a>  
							</div>  
					    </div>
					  </div>
					  
				<div class="form-group">
					    <div class="col-sm-offset-2 col-sm-10">
					      <div id='uploadinfo'>
					      		<!-- <div class="row">
					      			<div class="col-md-9">
										<span>a.pdf</span>
										<input type="text" placeholder="请输入备注">
					      			</div>	
					      			<div class="col-md-3">
										<button class="btn btn-default btn-xs">删除</button>
						      		</div>
					      		</div>
					      			<div class="row">				      			
						      			<div class="col-md-11 m-d-10">
													 <progress></progress>
						      			</div>
						      			
					      		</div> -->
					      		
					      </div>
					    </div>
					  </div>
					 <div class="form-group">
					    <label for="inputEmail3" class="col-sm-2 control-label"> </label>
					    <div class="col-sm-offset-3 col-sm-9">
<button class="btn btn-default" onclick="uploadfilesfun()"/> 文件上传</button>
					    </div>

					    <div class="col-sm-offset-2 col-sm-10 m-d-10" style="margin-top:30px" id="returninfo">
					    </div>
					  </div>
					</form>
				</div>
		</div>
</div>

<include file="Public/footer" /> 
</body>
<script src="/Public/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/Public/bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="/Public/js/ajaxfileupload.js"></script>
  <script type="text/javascript">  
	$('input[id=lefile]').change(function() {  
	$('#photoCover').val($(this).val());  
	});  
</script>  
									 
<script type="text/javascript">
var filenum;
var arrayurl = new Array();
var progressarray = new Array();
var nexturl = "#";
var arrayblob = new Array();
var uploadnow;
var filelist = new Array();
function  handleFiles(files)
{
    filenum = 0;
    var uploadctrl = document.getElementById('uploadinfo');
    //每次选择上传文件即将原来上传文件清空
    while(uploadctrl.hasChildNodes()) //当div下还存在子节点时 循环继续
    {
        uploadctrl.removeChild(uploadctrl.firstChild);
    }
    if(files.length)
    {

        var file; 
        //取得FileList取得的file集合 
        blobreadnow = 0;
        for(var i = 0 ;i<document.getElementById("multifile").files.length;i++){ 
            //file对象为用户选择的某一个文件 
            file=document.getElementById("multifile").files[i]; 
            //进度显示控件初始化
            var divobj = document.createElement("div");
            divobj.id="div_"+file.name;
            divobj.name = "div_"+file.name;
            divobj.className = "ty"
            var progressobj = document.createElement("progress");
            progressobj.id="progress_"+file.name;
            progressobj.name = "progress_"+file.name;
            progressobj.className = "tyy"
            progressobj.value=0;
            divobj.innerHTML=(file.name);
            progressarray[i] = progressobj;
            document.getElementById("uploadinfo").appendChild(divobj);
            document.getElementById("uploadinfo").appendChild(progressobj);
            //将文件添加到文件类表
            filelist[i] = file;
        } 
    }
    filenum = files.length;
} 
function uploadfilesfun()
{
    filedownnow = 0;
    var filesobj = document.getElementById('multifile');
    if(filesobj.files.length<=0)
        alert("you have not select files");
    for(var i=0;i<document.getElementById("multifile").files.length;i++){
        file=document.getElementById("multifile").files[i]; 
        url = "{:U('upload')}";//自己设置自己的上传服务器处理脚本
        arrayurl[i] = url;
    }
    /*数据准备完毕，开始读取第一个文件并上传*/
    uploadnow = 0;
    uploadafterread(uploadnow);
}
function uploadafterread(i)
{
    //alert("i="+i+filelist[i].name);
    var realname = filelist[i].name;

    var reader = new FileReader();
    reader.onloadend = function(e) { after_read_file(e,realname); }
    reader.readAsArrayBuffer(filelist[i]); //读取这个文件，读取进度完毕执行上面的回调函数
}
function after_read_file(evt,realname)
{
    if (evt.target.readyState != FileReader.DONE) // DONE == 2
        return;
    var abuf=evt.target.result;
    var blob = new Blob([abuf]);
    var formData = new FormData();
    //formData.append('policy', arraypolicy[uploadnow]);
    //formData.append('signature', arraysignature[uploadnow]);
    formData.append('file', blob);
    formData.append('name',realname);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', arrayurl[uploadnow], true);
    xhr.onload = function(e) { onload(e); }
    xhr.onerror = function(e) { onerror(e); }
    xhr.onreadystatechange = function () {
 		if (xhr.readyState==4 && xhr.status ==200) {
 			var returninfo = document.createElement("p");
 			returninfo.innerHTML = xhr.responseText;
 			document.getElementById("returninfo").appendChild(returninfo);
 		}
 	};
    xhr.upload.onprogress = function(e) { onprogress(e); }
    xhr.send(formData);
}
//每一个文件上传完毕就将uploadnow增加1，并调用读取下一个文件的文件的函数进行上传
function onload(evt)
{
    progressarray[uploadnow].value = (100);
    if (nexturl&&uploadnow==filenum-1){
    	//alert(0);	
    	//alert(nexturl);
        window.location.href = nexturl;
    }
    else
    {
        uploadnow = uploadnow + 1;
        uploadafterread(uploadnow);
    }
} 
onerror = function(e)
{
    alert('An error occured during uploading, please try again later!');
    progressarray[uploadnow].value = (0);
}
function onprogress(evt)
{
    if (evt.lengthComputable) 
    {
        progressarray[uploadnow].value = ((evt.loaded / evt.total) * 100);
    }
}

</script>

</html>